Forms in HTML5: method, Get, Post, radio button, checkbox, fieldset, datalist, select, text input

Forms

Forms are very useful in collecting data from users and then send it to a web server for further processing. The form element creates an area for data input elements and designates the URL to which any collected data will be transmitted.

The element form defined an HTML5 form.
The attribute method indicates how the data is sent to the server which is either getpost
- GET (default): Simple
- Advantage: Users can access server-side programs that uses GET for testing and debugging without creating a form, simply by using a URL with the proper data appended.
- Disadvantage: URL size is restricted on some browsers.
- The data is displayed, and this is inappropriate for sensitive data
- POST: opposite of GET
The atribute action specifies the URL of the web server that will process the FORM data. Server-side programming will be discussed later in this course.
Or an e-mail address which the form data will be sent (e.g., mailto:audit@irs.gov)
Rmq: When mailto is used, POST method is prefered.
input specifies data that will be processed by the script program (form handler).

Input's type can be either nonvisual (hidden) or visual.
visual items such as clickable button
hidden items are used to store data including links and email addresses.

The element text input helps the user to input data

The element label specfies information about the text input element, the attribute size specifies the number of charcters in the text field, and the optional attribute maxlength limits the number of characters inputted.

The elements reset and submit input are used to reset all form element to default values and to submit form's data to web server respectively. The attribute value assigns what to be shown on the button
Other elements that help to collect feedback from users including textarea specifies a multiline text area with number of rows (attribute rows ) and number of columns (attribute cols).
The password input allows users to send sensitive data to the server but gets displayed like asterisks on the form
The element checkbox allows users to select one or multiple answers.
The element radio button allows users to select only one option.
The element select allows users to pick an option from a dropdwon list. It is identified by the attribute name and items are added to it through the element option
The element fieldset helps to group related elements in a form
The element datalist is a predfined option for an <input> element and it is similar to select element. It allows users to select an option from a drop-down list of predefined options for an <input> element

An HTML5 example about forms is shown:

			<!DOCTTYPE html> 

			<!--Example 1: Forms.html --> 

			<html> 

			<head> 

				<title> Forms example </title> 

			</head> 

			<body> 

			<h1> Here is an example of a feedback form </h1> 

			<form method="post" action="http://www.google.com"> 

				<p> 

				<label> First Name 

				<input type="text" name="fname" required > 

				</label> 
 
				</p> 

			
				<p> 

				<label> Last Name 

				<input type="text" name="lname" required > 

				</label> 
 
				</p> 

			
				<p> 

				<label> Email Address 

				<input type="password" name="email_address" size="30" > 

				</label> 
 
				</p> 

			
				<fieldset> 

					<legend> Which IT course type do you require? </legend> 

					<p> <label> <input type="radio" name="course" required value="html"> HMTL5 </label> </p> 

					<p> <label> <input type="radio" name="course" required value="c#"> C# </label> </p> 

					<p> <label> <input type="radio" name="course" required value="multimedia"> Multimedia </label> </p> 

					<p> <label> <input type="radio" name="course" required value="networking"> Networking </label> </p> 

				</fieldset> 

			
				<fieldset> 

					<legend> Extras </legend> 

					<p> <label> <input type="checkbox" name="extras" required value=&quoexamples"> Examples </label> </p> 

					<p> <label> <input type="checkbox" name="extras" required value=&quohw"> Homework Assignments </label> </p> 

					<p> <label> <input type="checkbox" name="extras" required value=&quoquizzes"> Online Quizzez </label> </p> 

				</fieldset> 

			
				<p> <strong> How did you reach this site?: </strong> 

					<label>Search engine 

					<input name = "howtoreach" type = "radio" value = "search engine" checked> </label> 

					<label>Links from another website 

					<input name = "howtoreach" type = "radio" value = "link" </label> 

					<label>Google.com website 

					<input name = "howtoreach" type = "radio" value = "google.com" </label> 

					<label>Reference in a online article 

					<input name = "howtoreach" type = "radio" value = "article" </label> 

					<label>Other 

					<input name = "howtoreach" type = "radio" value = "other" </label> 

				</p> 

			
				<p> <label>Rate this site: 

					<select name="rate" 

					<option selected> 5 </option> 

					<option selected> 4 </option> 

					<option selected> 3 </option> 

					<option selected> 2 </option> 

					<option selected> 1 </option> 

					</select> 

					</label> 

				</p> 


				<p> <label> <Special Instructions: <br> 
	
					<textarea name = "comments" rows = "5" cols = "50" > Please enter your feedback here. </textarea > 

					</label> 

				</p> 


				<p> <label> Additionl comments, if any 

					<textarea name="comments" maxlength="500" > </textarea> 

					</label> 

				</p> 

		
				<p> 
					<input type = "submit" value = "Submit" > 
 
					<input type = "reset" value = "Reset" > 
 
				</p> 

		
			</form > 

		</body> 

		</html>

The rendered internal links example is:

For more details, please contact me here.
Date of last modification: March 26, 2019.